import '../../styles/login.less';
import React from 'react';
import Banner from '../../components/banner';
import Search from '../../components/search';
import Footer from '../../components/footer';
import { BannerProps } from '../../components/interface/BannerInterface';
import { SearchComponentInterface, SearchProps } from '../../components/interface/SearchComponentInterface';

import banner1 from '../../assets/images/banner1.jpg';
import banner2 from '../../assets/images/banner2.jpg';
import ProductListComponent from '../../components/ProductListComponent';
import { ProductListProps } from '../../components/interface/ProductListComponentInterface';

interface Iprops {
  history: any
}

interface IState {
  loginFlag: boolean,
  bannerData: BannerProps,
  productListData: ProductListProps,
  searchData: SearchComponentInterface
}

export default class Home extends React.Component<Iprops, IState> {
    // 初始化页面常量 绑定事件方法
  constructor(props:any, context:any) {
    super(props)
    let bannerData = new BannerProps();
    let searchData = new SearchProps();
    let productListData = new ProductListProps();
    productListData.productList = [
      {title: "商品1", price: 11.00, origin_price: 20.00, sales_volume: 0, banner_imgs: []},
      {title: "商品2", price: 12.00, origin_price: 20.00, sales_volume: 0, banner_imgs: []},
      {title: "商品3", price: 13.00, origin_price: 20.00, sales_volume: 0, banner_imgs: []}
    ];
    // 搜索框聚焦世界
    searchData.onFocus = function() {
      props.history.push('/login')
    }
    this.state = {
        loginFlag: false,
        bannerData: bannerData,
        searchData: searchData,
        productListData: productListData
    }
  }

  componentWillMount() {
    this.state.bannerData.bannerList = [
      banner1,
      banner2
    ];

    this.setState({
      bannerData: this.state.bannerData
    })


  }

  render() {
    return (
        <>
          <Search {...this.state.searchData}></Search>
          <Banner {...this.state.bannerData} />
          <ProductListComponent {...this.state.productListData} />
          <Footer {...{activeName:'home', history: ''}}></Footer>
        </>
    )
  }

}